<template>
	<div class="header">
		<!-- <van-image width="100%" height="100%" fit="contain" position="left" src="/img/face.jpg" alt="Image" /> -->
		<img src="/img/face.jpg" max-width="100% height: auto;" alt="Image" />
		<div class="page">
			<div class="banner_title">
				<span>添加访客</span>
			</div>
		</div>
	</div>
	<div class="content">
		<van-tabs v-model:active="activeTab" animated type="card">
			<van-tab title="填表">
				<div class="form">
					<van-form @submit="handleSubmit">
						<!-- 可以使用 CellGroup 作为容器"checkedValues.join(',')" -->
						<van-cell
							title="区域"
							is-link
							arrow-direction="down"
							:value="checkedValues.join(',')"
							@click="showPopup = true"
						/>
						<van-field v-model="form.name" label="姓名" placeholder="请输入姓名" />
						<van-field
							v-model="form.beginTime"
							label="开始时间"
							type="datetime"
							placeholder="请选择开始时间"
						/>
						<van-field
							v-model="form.endTime"
							label="结束时间"
							type="datetime"
							placeholder="请选择结束时间"
						/>
						<van-cell center title="人脸认证">
							<template #right-icon>
								<van-switch v-model="isFace"></van-switch>
							</template>
						</van-cell>

						<div class="facediv" v-show="isFace">
							<!-- <van-divider>上传人脸信息</van-divider> -->
							<van-field
								label="照片"
								label-class="font-bold"
								input-align="right"
								:center="true"
								:border="false"
								is-link
								readonly
							>
								<template #input>
									<van-uploader v-model="fileList" :after-read="afterRead" multipe :max-count="1">
									</van-uploader>
								</template>
							</van-field>
						</div>
						<van-row>
							<van-col span="8" offset="2">
								<van-button type="primary" round block native-type="submit">提交</van-button>
							</van-col>
							<van-col span="8" offset="2">
								<van-button type="success" round block @click="activeTab = 1">二维码</van-button>
							</van-col>
						</van-row>
					</van-form>
				</div>
			</van-tab>
			<van-tab title="结果">
				<div class="qr-code-container">
					<div class="qr-code-wrapper">
						<img v-if="imgQR" :src="imgQR" alt="二维码" class="qr-code" />
						<van-empty v-else description="没有图片，请先填写提交"></van-empty>
					</div>
				</div>
			</van-tab>
		</van-tabs>
		<van-popup v-model:show="showPopup" position="bottom">
			<div style="padding-left: 30px; align-items: center">
				<h3>请选择要进入的门禁区域</h3>
				<van-checkbox-group v-model="checkedValues" shape="square" checked-color="green">
					<van-space direction="vertical" fill :size="10">
						<van-checkbox name="前门" label="前门">前门</van-checkbox>
						<van-checkbox name="后门" label="后门">后门</van-checkbox>
						<van-checkbox name="招标" label="招标">招标</van-checkbox>
						<van-space></van-space>
					</van-space>
				</van-checkbox-group>
			</div>
		</van-popup>
	</div>
	<!--end of header-->
</template>

<script setup>
	import { ref } from 'vue'
	import { reactive } from 'vue'
	import { showToast, Checkbox, CheckboxGroup } from 'vant'
	import { Image as VanImage, Form, Field, CellGroup } from 'vant'

	import { useUserStore } from '@/stores/user'
	import service from '@/utils/request'
	const imgFace = ref('../img/staff.png')
	const imgQR = ref('')
	const isFace = ref(false)
	const showQR = ref(false)
	const fileList = ref([])
	const checkedValues = ref(['前门', '后门'])
	const showPopup = ref(false)
	const activeTab = ref(0)
	const userStore = useUserStore() //获取login用户信息
	const form = reactive({
		door: [],
		name: '访客',
		gender: 'male',
		beginTime:
			new Date().getDate() +
			1 +
			'/' +
			(new Date().getMonth() + 1) +
			'/' +
			new Date().getFullYear() +
			' ' +
			'08:30',
		//new Date().getMinutes(),,
		endTime:
			new Date().getDate() +
			1 +
			'/' +
			(new Date().getMonth() + 1) +
			'/' +
			new Date().getFullYear() +
			' ' +
			'17:30',
		//new Date().getMinutes(),,
		base64Pic: '',
		invitee: '' //userStore.userName,
	})
	const afterRead = (file) => {
		const reader = new FileReader()
		reader.readAsDataURL(file.file)
		reader.onload = () => {
			form.base64Pic = reader.result
			fileList.value.push({
				name: file.file.name,
				base64: form.base64Pic
			})
		}
		console.log(form.base64Pic)
	}
	const handleSubmit = () => {
		if (form.endTime < form.beginTime) {
			showToast('结束时间必须大于开始时间！')
			return
		}
		form.door = checkedValues.value
		// 遍历form对象
		for (let key in form) {
			console.log(key + ': ' + form[key])
		}
		console.log('*****FormData End*******')
		showToast('正在提交...' + form.door.join(','))
		const response = service
			.post('/api/accessControl/addGuest', form, {
				headers: {
					'Content-Type': 'application/json'
				}
			})
			.then((response) => {
				imgQR.value = response.data
				//console.log("this is response data :"+response);
				showQR.value = true
				activeTab.value = 1
			})
			.catch(function (error) {
				console.log(error)
				showToast('Error occurred 出错了!')
			})
	}
</script>

<style scoped>
	/* 通用样式 */
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.page {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px;
	}
	.banner_title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	/* 响应式样式 - 适用于移动端 */
	@media (max-width: 600px) {
		.header,
		.page {
			flex-direction: column;
		}
		.banner_title {
			font-size: 20px;
		}
	}
	/* 其他组件样式 */
	.van-image {
		width: 100%;
		height: auto;
		object-fit: cover;
		/* 使图片始终覆盖整个容器 */
	}
	.van-tabs {
		width: 100%;
	}
	.van-tab {
		display: flex;
		justify-content: space-between;
	}
	.van-cell {
		display: flex;
		align-items: center;
	}
	.van-switch {
		width: 50px;
		/* 根据实际需要调整开关按钮的尺寸 */
		height: 30px;
		/* 根据实际需要调整开关按钮的尺寸 */
		margin: 5px;
		/* 根据实际需要调整开关按钮的间距 */
	}
</style>
